<template>
  <view class="login">
    <uv-navbar height="100rpx" placeholder :autoBack="false" border>
      <template v-slot:left>
        <view class="flex">
          <uv-avatar :src="userInfoStore.userInfo.avatar"/>
          <view class="flex flex-column m-l-20">
            <text>{{ userInfoStore.userInfo.name }}</text>
            <text class="font-24">用户编号{{ userInfoStore.userInfo.id }}</text>
          </view>
        </view>
      </template>
    </uv-navbar>

    <view class="box">
      <input v-model="formParams.name" placeholder="昵称" class="border p-20 m-20">
      <uv-button @click="getToken" type="warning" text="登录" class="m-20"/>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {loginApi} from "@/api";
import type {User} from "@/types/user";
import {rongCloudStore} from "@/store/modules/rongcloud";
import tips from "@/utils/tips";
import {userStore} from "@/store/modules/user";

const userInfoStore = userStore()
const rongCloud = rongCloudStore()
const userInfo = ref<User>(userInfoStore.userInfo)

const formParams = ref({
  name:'张三',
  password:'123456'
})

// 获取token
const getToken = async () => {
  rongCloud.disconnect()
  tips.showLoading()
  let res = await loginApi.getToken(formParams.value)
  tips.hideLoading()
  await userInfoStore.setUserInfo(res)
  rongCloud.connectSocket()
  console.log(userInfo.value)
}

</script>


<style scoped lang="scss">
.login{
  min-height: calc(100vh - 100rpx);
  background: #fff;
  .box{
    height: 600rpx;

  }
}
</style>
